<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{
        margin: 20px 20px;
        width: 500px;
        height: 400px;

    }
    .frame{
        padding: 10px 0;
    }
    .frame input[type="text"]{
        width: 300px;
        padding: 5px;
        height: 35px;
        outline: 0;
        border: 1px solid #C5C5C5;
    }
    .frame select{
        width: 300px;
        padding: 5px;
        outline: 0;
        height: 35px;
        border: 1px solid #c5c5c5;
    }
    label{
        display: block;
    }
    .divBtn{
        margin: 10px 0;
        padding: 0;
        width: 60%;
        text-align: right;
    }
    input.reset,input.query,input.delete{
        border: 0;
        color: #fff;
        width: 80px;
        height: 35px;
        outline: 0;
    }
    input.reset{
        background-color: #ed9c28;
    }
    input.query{
        background-color: #009fcd;
    }
    input.delete{
        background-color: #d9534f;
    }
</style>
<body>
<div class="box">
    <div class="frame">
        <label for="">白名单卡号</label>
        <input type="text" placeholder="请输入要增加的白名单,多个卡号用逗号分割" class="whitecard1"/>
        <span class="msg"></span>
    </div>
    <div class="frame">
        <label for="">白名单卡号</label>
        <input type="text" placeholder="请输入要删除的白名单,多个卡号用逗号分割" class="whitecard2"/>
        <span class="msg"></span>
    </div>
    <div class="divBtn">
<!--         <input type="button" name="" value="重置" class="reset" id="reset" data-dismiss="modal"/> -->
        <input type="button" name="" value="删除" class="delete" id="delete" data-dismiss="modal"/>
        <input type="button" name="" value="增加" class="query" id="query"/>
    </div>
</div>
</body>
<script>
   $('#query').on('click', function() {
      var card1 = $('.whitecard1').val();
      var card2 =$('.whitecard2').val();
      var msg = $('.msg');
      if(card2&&card1){
          msg.html("");
           $.ajax({
           type : 'post',
           url : '',
           data : {},
           dataType : 'json',
           success : function(data) {

           },
           error: function(){
               bootboxWindow.alert("指令下发失败!", null);
           }
       });
      }else{
          msg.html("不能为空");
         }
   });
   $('#delete').on('click', function() {
      var card1 = $('.whitecard1').val();
      var card2 =$('.whitecard2').val();
      var msg = $('.msg');
      if(card2&&card1){
        msg.html("");
       $.ajax({
           type : 'post',
           url : '',
           data : {},
           dataType : 'json',
           success : function(data) {
            
           },
           error: function(){
               bootboxWindow.alert("指令下发失败!", null);
           }
       });
     }else{
       msg.html("不能为空");
     }
   });
    // $(function(){
    //     $('#reset').on('click',function(){
    //         var address_value = $('#address').val();
    //         if(address_value !== ""){
    //             $('#address').val("");
    //         }
    //     })
    // })
</script>
</html>